import {
    SafeAreaView,
    FlatList,
    View,
    Text,
    StyleSheet,
    TouchableHighlight,
    Dimensions
} from 'react-native';
import React, {Component} from 'react';
import Colors from 'react-native/Libraries/NewAppScreen/components/Colors';
import Ionicons from 'react-native-vector-icons/Ionicons';
class ApiPage extends Component {
    screen = Dimensions.get('screen').width/2 - 20;
    DATA = [
        {
            id: '0',
            title: 'HTTP请求',
            iconName: 'globe-sharp',
            url: 'HttpPage'
        }
    ]
    styles = StyleSheet.create({
        Item:{
            flexDirection: 'row',
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: '#ffffff',
            borderColor: '#90EE90',
            width: this.screen,
            margin: 10,
            padding:20,
            borderWidth: 1,
            shadowColor: '#90EE90',  //设置阴影色
            shadowOffset:{width:100,height:100},  //设置阴影偏移,该值会设置整个阴影的偏移，width可以看做x,height可以看做y,x向右为正，y向下为正
            shadowOpacity: 1,
            elevation:2,
            shadowRadius: 4
        },
        ItemText:{
            fontSize: 16,
            color: Colors.dark
        },
        icon: {
            marginRight: 10
        },
        title: {
            height: 50,
            paddingLeft: 10,
            flexDirection: 'row',
            alignItems: 'center',
            backgroundColor: '#3CB371',
            shadowColor: '#000',  //设置阴影色
            shadowOffset:{width:0,height:10},  //设置阴影偏移,该值会设置整个阴影的偏移，width可以看做x,height可以看做y,x向右为正，y向下为正
            shadowOpacity: 1,
            elevation:2,
            shadowRadius: 1.5
        },
        titleText: {
            fontSize: 20,
            color: Colors.white,
            fontWeight: 'bold'
        },
        container: {
            flex: 1,
            backgroundColor: '#fff'
        }
    })
    _createItem = ({ title,url,iconName }) => {
        return (

            <TouchableHighlight onPress={this._onPressButton(url,title)}
                underlayColor={'#F5FFFA'}
            >
                <View style={this.styles.Item}>
                    <Ionicons color={Colors.dark}
                        name={iconName}
                        size={16}
                        style={this.styles.icon}
                    />
                    <Text style={this.styles.ItemText}>{title}</Text>
                </View>

            </TouchableHighlight>
        );
    }
    _renderItem = ({ item }) => this._createItem(item);
    _onPressButton = (url,title)=> {
        return ()=>{
            this.props.navigation.navigate(url, {
                title: title
            });
        };
    }
    render(){
        return (
            <SafeAreaView style={this.styles.container}>
                <View style={this.styles.title}>
                    <Text style={this.styles.titleText}>Api</Text>
                </View>
                <FlatList
                    data={this.DATA}
                    keyExtractor={item => item.id}
                    numColumns={2}
                    renderItem={this._renderItem}
                />
            </SafeAreaView>
        );
    }
}

export default ApiPage;
